<template>
  <el-table
    :data="props.tableData"
    style="width: 100%"
    border
    stripe
    row-key="id"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    :expand-row-keys="expandRowKeys"
    @expand-change="handleExpandChange"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" align="center" width="55" label="序号" />
    <el-table-column
      align="center"
      v-for="item in props.columns"
      :key="item.props"
      :label="item.label"
      :prop="item.prop"
      width="200"
    />
    <el-table-column label="图标" align="center">
      <template #default="{ row, $index }">
        <el-icon :size="20" :color="row.meta.icon">
          <component :is="row.meta.icon" />
        </el-icon>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{ row, $index }">
        <el-button type="primary" @click="handleEdit(row, $index)">编辑</el-button>
        <el-button type="danger" @click="handleDelete(row, $index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <Component :is="tableData"></Component>
  {{ (props.tableData, props.columns) }} -->
</template>
<script setup lang="ts">
import { ref, PropType, defineEmits } from "vue";
const expandRowKeys = ref([]);
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array as PropType<any[]>,
    required: true,
  },
  // 表格列
  columns: {
    type: Array as PropType<any[]>,
    required: true,
  },
});
const emit = defineEmits(["edit", "delete", "selectionChange"]);
// 编辑
const handleEdit = (row: any, $index: number) => {
  emit("edit", row, $index);
};
// 删除
const handleDelete = (row: any, $index: number) => {
  emit("delete", row, $index);
};
// 全选
const handleSelectionChange = (val: any) => {
  emit("selectionChange", val);
};
// 展开行
const handleExpandChange = (row: any, expanded: boolean) => {
  if (expanded) {
    expandRowKeys.value.push(row.id);
  } else {
    expandRowKeys.value = [];
  }
};
</script>
